<template>
  <view>
    <u-navbar title="帮助与反馈" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <view class="feedback_type">
        <view style="margin-top: 5px;font-size: 16px;font-weight: bold;">问题类型</view>
        <view class="grid">
          <view class="grid_item" v-for="item in items" :key="item.label">
            {{ item.label }}
          </view>
        </view>
        <view class="desc">
          <text>
            举报用户，请点击对方头像进入个人主页-右上角-举报此人。或发送对方主页与违规证据至邮箱：1426169428@qq.com。如有其他问题或产品建议，可添加客服微信反馈。
          </text>
        </view>
      </view>
      <view class="wx">
        <view class="qrcode">
          <image @longtap="onTap()" @click="previewImg()"
            src="/static/wechat.png"
            mode="scaleToFill"
          />
        </view>
        <view class="info">
          <view class="name">软件作者</view>
          <view class="label">一个00后程序员</view>
        </view>
        <image
          src="/static/help_logo.png"
          mode="scaleToFill"
          class="fixed_img"
        />
        <text class="fixed_label">人工客服，有问必答</text>
      </view>
      <view class="tip">
        长按二维码保存到相册，使用微信扫一扫，添加客服微信。
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          label: '课表问题',
          url: ''
        },{
          label: '学校信息问题',
          url: ''
        },{
          label: '软件问题',
          url: ''
        },{
          label: '社区违规问题',
          url: ''
        },{
          label: '账号注销',
          url: ''
        },{
          label: '其他问题',
          url: ''
        },
      ]
    }
  },
  computed: {

  },
  methods: {
    onTap() {
      uni.saveImageToPhotosAlbum({
        filePath: '/static/wechat.png',
        success: res => {
          this.$toast.show({
            msg: '保存图片成功'
          })
        }
      })
    },
    previewImg() {
      uni.previewImage({
        urls: ['/static/wechat.png']
      })
    }
  },
} 
</script>

<style scoped lang="scss">
  .feedback_type {
    width: auto;
    margin: 20px 25px;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 14px;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;

    &_item {
      width: calc((100% - 20px) / 3);
      line-height: 42px;
      background-color: #00a679;
      padding: 5px;
      margin: 5px;
      box-sizing: border-box;
      color: #ffffff;
      font-size: 12px;
      text-align: center;
      border-radius: 8px;

      &:nth-child(3n - 2) {
        margin-left: 0;
      }

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }

  .desc {
    margin-top: 10px;
    color: #999999;
    font-size: 10px;
    line-height: 22px;
    word-break: break-all;
    text-align: justify;
  }

  .wx {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    margin: 75px 25px 0;
    border: 2px solid #000000;
    padding: 15px;
    border-radius: 14px;

    image {
      display: block;
      width: 108px;
      height: 108px;
    }

    .info {
      flex: 1;
      margin-left: 15px;
      letter-spacing: 1px;

      .name {
        font-weight: bold;
      }

      .label {
        color: #00a679;
        font-size: 12px;
      }
    }

    .fixed_img {
      position: absolute;
      top: -65px;
      left: 50px;
      width: 64px;
      height: 64px;
    }

    .fixed_label {
      position: absolute;
      top: 0;
      left: 120px;
      transform: translateY(-100%);
      padding: 3px 10px;
      background-color: #000000;
      border-radius: 8px 8px 0 0;
      color: #ffffff;
      font-weight: bold;
    }
  }

  .tip {
    padding: 10px 30px;
    box-sizing: border-box;
    color: #666666;
  }
</style>